<template>
  <!-- 图片显示 -->
  <ul class="form-image-show">
    <li class="form-image-show--item" v-for="(item, i) in list" :key="i">
      <img :src="item.url" />
      <label class="form-image-show--label">
        <i class="el-icon-check"></i>
      </label>
      <div class="form-image-show--actions">
        <span class="form-image-show--button" @click="onPreview(item)" style="margin-right: 10px">
          <i class="el-icon-zoom-in" />
        </span>
        <span v-if="isEdit" @click="onRemove(item, i)">
          <i class="el-icon-delete" />
        </span>
      </div>
    </li>

    <el-dialog :title="image.name" :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="image.url" alt />
    </el-dialog>
  </ul>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    // 	下载的文件字段名
    dName: {
      type: String,
      default: ""
    },
    // 文件下载地址
    download: {
      type: String,
      default: ""
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      image: {},
      list: this.value
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.list = JSON.parse(JSON.stringify(newValue));
        }
      }
    }
  },
  methods: {
    // 移除
    onRemove(file, i) {
      if (this.readonly) return;
      this.list.splice(i, 1);
      this.$emit("update:value", this.list);
      this.$emit("change", this.list);
    },
    onPreview(file) {
      this.image = file;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.form-image-show {
  .form-image-show--item {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .form-image-show--label {
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 12px;
    .el-icon-check {
      transform: rotate(-45deg);
    }
  }
  .form-image-show--actions {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    cursor: default;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    > span {
      cursor: pointer;
    }
  }
  .form-image-show--item:hover {
    .form-image-show--actions {
      opacity: 1;
    }
    .form-image-show--label {
      display: none;
    }
  }
}
</style>
